<template>
  <div class="component component--module more-headlines">
    <header class="header header--primary">
      <h2 class="title">
        <span class="label">{{ props.moreHeader.content }}</span>
      </h2>
    </header>
    <div class="column column--primary j-moreHeadlineWrapper">
      <div class="collection__elements j-scrollElement">
        <!-- videoCenter.vue   180行 video -->
        <div class="element element--article MarketWatchcom" v-for="(item, index) in props.moreData" :key="index">
          <figure class="article__figure">
            <router-link class="figure__image"
              :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
              <img class="lazyload" :src="item.imgUrl" v-if="item.imgUrl" />
              <img class="lazyautosizes" src="../../../assets/noimg.png" v-else />
            </router-link>
          </figure>
          <div class="article__content">
            <h3 class="article__headline">
              <router-link class="link" :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
                {{ item.title }}
              </router-link>
            </h3>
            <div class="article__details">
              <span class="article__timestamp">{{ formateDate(item.createTime) }}</span>
            </div>
            <div class="content--secondary" v-if="item.company">
              <div class="group group--tickers">
                <bg-quote :class="[item.data < 0 ? 'negative' : 'positive']">
                  <router-link class="ticker" :to="{ name: 'stockDetail', params: { symbol: item.company } }">
                    <span class="ticker__symbol">{{ item.company }}</span>
                    <bg-quote :class="[item.data < 0 ? 'negative' : 'positive']">{{ item.ticketChange }}</bg-quote>
                    <i class="icon"></i>
                  </router-link>
                </bg-quote>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { formateDate } from '@/utils/timeHandle';
const props = defineProps(['moreHeader', 'moreData'])
if (props.moreData.length > 0) {
  props.moreData.forEach((item) => {
    if (item.ticketChange && item.ticketChange !== null) {
      item.data = parseFloat(item.ticketChange) / 100;
    }
  })
}
</script>
<style lang="scss" scoped></style>
